/*
 * @Author: Eli.Chen
 * @Date: 2025-03-06 16:40:14
 * @LastEditors: Eli.Chen
 * @LastEditTime: 2025-04-30 12:14:53
 * @Description: 论坛
 */
import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { LikeOutlined, SignatureOutlined, StarOutlined, UserOutlined, ProductOutlined } from '@ant-design/icons';
import { Avatar, List, Space, Card, Row, Col, Divider, Typography, Grid, Button } from 'antd';
import { useNavigate } from 'react-router-dom';

import { urlMap, imagesMap } from '@/utils';
import { getCommunityUserInfo, createThread } from '@/api/community';
import { setTPostInfo } from '@/store/reducers/form';

import './index.scss';
import ComList from '@/components/thread/ComList';
import PublishhWork from '@/components/thread/PublishWork';
import { ReactComponent as WorkIcon } from '@/assets/image/icons/WorkIcon.svg';
import { ReactComponent as SendIconT } from '@/assets/images/icons/SendIconT.svg';
import { COLOR_THEME } from '@/config/theme';
const { useBreakpoint } = Grid;

export default function Thread() {
    const screens = useBreakpoint();
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const [dialogOpen, setDialogOpen] = useState(false);
    const [workInfo, setWorkInfo] = useState({});
    const { userInfo } = useSelector((state) => state.auth);
    const { threadIsRefresh } = useSelector((state) => state.active);
    const { tPostInfo } = useSelector((state) => state.form);

    useEffect(() => {
        if (userInfo) {
            const { userId } = userInfo;
            getCommunityUserInfo(userId).then((res) => {
                if (res.data) {
                    setWorkInfo(res.data);
                }
            });
        }
    }, [userInfo, threadIsRefresh]);

    return (
        <div className="com-container">
            <Row
                gutter={10}
                style={{
                    height: '100%%',
                    width: '100%',
                }}
            >
                <Col span={17}>
                    <Card
                        className="com-list-container"
                        style={{
                            minHeight: '630px',
                            maxHeight: '70vh',
                            height: 'calc(80% - 100px)',
                            borderRadius: '10px',
                            display: 'flex',
                            flexDirection: 'column',
                        }}
                    >
                        <div
                            className="custom-scrollbar"
                            style={{
                                width: '100%',
                                height: '73vh',
                                overflowY: 'auto',
                                position: 'relative',
                            }}
                        >
                            <ComList />
                        </div>
                    </Card>
                </Col>
                <Col span={7}>
                    <Card
                        className="com-list-container"
                        style={{
                            minHeight: '630px',
                            width: '100%',
                            height: 'calc(80% - 100px)',
                            display: 'flex',
                            borderRadius: '10px',
                            padding: '10px',
                            justifyContent: 'center',
                        }}
                    >
                        <Space
                            direction="vertical"
                            size="middle"
                            style={{
                                display: 'flex',
                                width: '100%',
                                marginTop: '30px',
                                gap: '20px',
                            }}
                        >
                            <div
                                style={{
                                    display: 'flex',
                                    justifyContent: 'center',
                                    width: '100%',
                                    marginTop: '30px',
                                }}
                            >
                                {userInfo?.avatarPath ? (
                                    <Avatar
                                        size={100}
                                        src={
                                            urlMap.defaultUrl +
                                            imagesMap.defaultAvatarPath +
                                            userInfo.userId +
                                            '/' +
                                            userInfo?.avatarPath
                                        }
                                    />
                                ) : (
                                    <Avatar size={100} icon={<UserOutlined />} />
                                )}
                            </div>
                            <Space
                                direction="vertical"
                                size="middle"
                                style={{
                                    display: 'flex',
                                    marginTop: '20px',
                                }}
                            >
                                <div
                                    style={{
                                        display: 'flex',
                                        justifyContent: 'center',
                                        marginLeft: '90px',
                                        width: '80%',
                                        margin: '0 auto',
                                    }}
                                >
                                    <span
                                        style={{
                                            fontSize: '20px',
                                        }}
                                    >
                                        {userInfo?.username}
                                    </span>
                                </div>
                                <div
                                    style={{
                                        display: 'flex',
                                        justifyContent: 'center',
                                        marginLeft: '90px',
                                        gap: '10px',
                                        width: '80%',
                                        margin: '0 auto',
                                        marginTop: '20px',
                                    }}
                                >
                                    <Space
                                        classNames="com-user-infor"
                                        split={<Divider type="vertical" />}
                                        style={{
                                            flexWrap: 'nowrap',
                                            whiteSpace: 'nowrap',
                                            padding: '0 10px',
                                        }}
                                    >
                                        <Typography
                                            style={{
                                                whiteSpace: 'nowrap',
                                                display: 'flex',
                                                alignItems: 'center',
                                                gap: '5px',
                                            }}
                                        >
                                            <WorkIcon width={20} height={20} />
                                            作品 : {workInfo?.worksCount}
                                        </Typography>
                                        <Typography
                                            style={{
                                                whiteSpace: 'nowrap',
                                                display: 'flex',
                                                alignItems: 'center',
                                                gap: '5px',
                                            }}
                                        >
                                            <StarOutlined style={{ color: COLOR_THEME.PRIMARY }} /> 收藏 :{' '}
                                            {workInfo?.totalFavorites}
                                        </Typography>
                                        <Typography
                                            style={{
                                                whiteSpace: 'nowrap',
                                                display: 'flex',
                                                alignItems: 'center',
                                                gap: '5px',
                                            }}
                                        >
                                            <LikeOutlined style={{ color: COLOR_THEME.PRIMARY }} />
                                            点赞 : {workInfo?.totalLikes}
                                        </Typography>
                                    </Space>
                                </div>
                                <div
                                    style={{
                                        display: 'flex',
                                        justifyContent: 'center',
                                        marginLeft: '90px',
                                        gap: '10px',
                                        width: '80%',
                                        margin: '0 auto',
                                        marginTop: '60px',
                                    }}
                                >
                                    <Button
                                        type="primary"
                                        onClick={() => {
                                            createThread({ userId: userInfo?.userId }).then((res) => {
                                                if (res.code === 200) {
                                                    setDialogOpen(true);
                                                    dispatch(
                                                        setTPostInfo({
                                                            ...tPostInfo,
                                                            tPostId: res.data,
                                                        })
                                                    );
                                                }
                                            });
                                        }}
                                    >
                                        <SendIconT
                                            style={{
                                                width: '16px',
                                                height: '16px',
                                                marginRight: '3px',
                                            }}
                                        />
                                        发布作品
                                    </Button>
                                    <Button
                                        onClick={() => {
                                            navigate('/user');
                                        }}
                                    >
                                        <ProductOutlined />
                                        作品管理
                                    </Button>
                                </div>
                            </Space>
                        </Space>
                    </Card>
                </Col>
            </Row>
            <PublishhWork
                dialogOpen={dialogOpen}
                onOk={() => setDialogOpen(false)}
                onCancel={() => setDialogOpen(false)}
            />
        </div>
    );
}
